import React, {useEffect} from "react";
import {Modal, Form, Input, Radio} from "antd";

const ClassModal = (props: any) => {
  const [form] = Form.useForm()
  const {visible, record, closeHandler, onFinish, options} = props

  useEffect(() => {
    if(record === undefined) {
      form.resetFields()
    } else {
      form.setFieldsValue(record)
    }
  }, [visible])

  const onOk = () => {
    form.submit();
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div>
      <Modal
        title="班级"
        visible={visible}
        onOk={onOk}
        onCancel={closeHandler}
        forceRender
        okText="确定"
        cancelText="取消"
      >
        <Form name="修改信息"
              form={form}
              labelCol={{span: 4}}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
        >
          <Form.Item label="班级名" name="className" rules={[{ required: true, message: '请输入班级名!' }]}>
            <Input/>
          </Form.Item>
          <Form.Item label="老师" name="teacherId">
            <Radio.Group >
              {options.map(item => {
                return (<Radio key={item.id} value={item.id}>{item.name}</Radio>)
              })}
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default ClassModal
